<template>
  <div class="page-content padding-top clearfix">
    <div class="imageBox clearfix">
      <div class="imageList" v-for="(item,index) in names" @click="imageChange(index)" >
        <div class="imageList-warp" @click="selectImg()">
          <input type="file" accept="image/jpg,image/jpeg,image/png" name="" @change="selectImg($event,item,index)">
          <img :src="imgUrl + item.imgUrl+'.r_105xh_105'" onerror="javascript:this.src='static/images/default.png';">
          <p>{{item.name | filterImageName}}</p>
          <span class="image-list-delete2 ion-ios-close-outline" v-if="item.name != 'left_anterior' && item.imgUrl" @click="imageDelete(item)" ></span>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
import { bus } from "bus.js";
export default {
  data() {
    return {
      imgUrl: imgUrl,
      names: [
        { name: "left_anterior", imgUrl: "", imgId: '' },
        { name: "vin", imgUrl: "" },
        { name: "right_rear", imgUrl: "", imgId: '' },
        { name: "driving_seat", imgUrl: "", imgId: '' },
        { name: "control_booth", imgUrl: "", imgId: '' },
        { name: "odograph", imgUrl: "", imgId: '' },
        { name: "open_trunk", imgUrl: "", imgId: '' },
        { name: "engine_bay", imgUrl: "", imgId: '' },
        { name: "gear_lever", imgUrl: "", imgId: '' },
        { name: "tyre", imgUrl: "", imgId: '' },
        { name: "insurance", imgUrl: "", imgId: '' },
        { name: "registration_license", imgUrl: "", imgId: '' },
        { name: "vehicle_license", imgUrl: "", imgId: '' }
      ],
      ind: 0,
      imgList: [],
      showIndex: ""
    };
  },

  mounted() {
    if (bus.$carImgChange) {
      if (bus.$carImgChange.length) {
        for (let i of this.names) {
          for (let j of bus.$carImgChange) {
            if (i.name == j.imgKey) {
              i.imgUrl = j.imgUrl
              i.imgId = j.imgId
            }
          }
        }
      }
    }

    for (let i = 0; i < this.names.length; i++) {
      if (this.names[i].imgUrl != "") {
        this.imgList.push({
          imageKey: this.names[i].name,
          imageUrl: this.names[i].imgUrl,
          imageSeq: i + 1
        });
      }
    }
    bus.$emit("carImgList", this.imgList);
  },
  methods: {
    deleteChangeFn (obj) {
      this.names.map(item => {
        if (item.name == obj.name) {
          item.imgUrl = ''
          item.imgId = ''
          this.imgList.map((itemTow, itemIndex) => {
            if (itemTow.imageKey == item.name) this.imgList.splice(itemIndex, 1)
          })
        }
      })
      $toast.show('删除成功')
      this.showIndex = ''
      bus.$emit("carImgList", this.imgList)
    },
    imageDelete(obj) {      
      if (obj.imgUrl) {
        $dialog.confirm({
          title: '提示',
          content: '是否删除该图片',
          cancelText: '取消',
          okText: '删除'
        }).then(res => {
          if (res) {
            if (!obj.imgId) {
              this.deleteChangeFn(obj)
              return 
            }
            window.axios.get(baseUrl + '/controller/carImage/deleteCarImage', {
              params: {
                imageId: obj.imgId
              }
            })
              .then(res => {
                setTimeout(() => {
                  this.deleteChangeFn(obj)
                }, 400)
              })
          } 
        })
      } else {
        $toast.show('该位置没有图片')
        return 
      }
    },
    imageChange(index) {
      this.showIndex = index;
    },
    selectItem(a, i) {
      this.ind = i;
      bus.$emit("carInColor", a);
    },
    selectImg(e, imgKey, i) {
      if (e) {
        var _this = this;
        var pic = e.target.files[0];
        var fd = new FormData();
        fd.append("uploadFile", pic);
        var thisImg = e.target.parentNode.getElementsByTagName("img")[0];
        axios
          .post(baseUrl + "/controller/upload/uploadFile", fd)
          .then(function(res) {
            var imgItem = {
              imageKey: imgKey.name,
              imageUrl: res.data.result.pathUrl,
              imageSeq: i + 1
            };
            for (var j = 0, length = _this.imgList.length; j < length; j++) {
              if (_this.imgList[j].imageKey == imgItem.imageKey) {
                _this.imgList.splice(j, 1);
                break;
              }
            }
            e.target.value = ''
            _this.imgList.push(imgItem);
            _this.names.map(item => {
              if (item.name == imgKey.name) item.imgUrl = res.data.result.pathUrl
            })
            _this.showIndex = ''
            bus.$emit("carImgList", _this.imgList);
          })
      }
    }
  }
};
</script>
<style type="text/css">
.imageBox {
  padding: 0 15px;
  background-color: #fff;
}
.imageList {
  width: 33.33%;
  height: 33.33vw;
  background-color: #fff;
  float: left;
  box-sizing: border-box;
  padding: 15px 10px;
}
.imageList-warp {
  height: 100%;
  position: relative;
  text-align: center;
}
.imageList-warp img {
  max-width: 100%;
  max-height: 100%;
  /*height: 100%;*/
}
.imageList-warp p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  line-height: 30px;
  text-align: center;
  margin: 0;
  color: #fff;
  font-size: 12px;
}
.imageList-warp input {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}
</style>






